<template>
	<view class="main">
		<!-- <view class="hide-bg"></view> -->
		<view class="input-box">
			<textarea focus="true" maxlength="500" class="textarea bg_white" :placeholder="defaultPlaceholder" v-model="comment" />
			<view class="bottom row-ver-center footer">
				<view class="btn-default" @click="cancleComment">取消</view>
				<view class="btn-primary" @click="commitComment">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			defaultPlaceholder: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				comment: ''
			}
		},
		methods: {
			// 取消评论
			cancleComment() {
				this.comment = ''
				this.$emit('cancleComment')
			},
			// 发布评论
			commitComment() {
				if (!this.comment)
					return this.$Common.tipMsg('评论内容不能为空')
				this.$emit('commitComment', this.comment)
			}
		},

	}
</script>

<style lang="scss" scoped>
	// 按钮
	@mixin btn($bgcolor:#fff, $color: #fff, $radius: 15px){
		width: 110px;
		height: 30px;
		line-height: 28px;
		margin: 0;
		text-align: center;
		border-radius: $radius;
		color: $color;
		background-color: $bgcolor;
	}
	.btn-primary {
		padding: 1px 0;
		@include btn($primary-color);
	}
	
	.btn-default {
		border: 1px solid $grey;
		@include btn(#fff,$grey);
	}
	.main {
		height: 100%;
		width: 100%;

		.input-box {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;

			padding: 16rpx;
			border-radius: 10rpx;

			textarea {
				padding: 16rpx;
				font-size: 30rpx;
				line-height: 36rpx;
				word-wrap: break-word;
				overflow-y: auto;
				height: 390rpx;
				width: 100%;
				background-color: #fff;
				margin-bottom: 7rpx;
				box-sizing: border-box;
				box-shadow: 1rpx 1rpx 3rpx 1rpx rgba(0, 0, 0, 0.2) inset;
			}

			.footer {
				justify-content: space-between;
				margin-top: 50rpx;
			}
		}
	}
</style>
